import React from 'react';
import ReactDOM from 'react-dom';

//1 ref='xxx'  同vue但是已经被废弃了
//2 ref={(el)=>{this.xxx = el}}
//3 this.xxx = React.createRef(),  ref={this.xxx}    this.xxx.current

function Child(props,ref){
  return <>
    <h1 ref={ref}>儿子组件</h1>
  </>
}
Child = React.forwardRef(Child)
// class Child extends React.Component{
//   render(){
//     return <h1>儿子组件</h1>
//   }
// }
class App extends React.Component {
    fn=()=>{
      console.log(this)
    }
    createdRef = React.createRef()
    render() {
        return <div className=''>
          <Child  ref={this.createdRef}/>
          <p ref='p_123'>哈哈哈哈</p>
          <h2 ref={(el)=>{this.hhh = el}}>钱钱钱</h2>

          <h3>还还还还还</h3>

          <button onClick={this.fn}>获取</button>
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))